<template>
  <div class="w-full flex justify-center p-2 font-bold">
    <!-- <var-chip class="mr-2" :round="false" type="warning" @click="goBack"
      >进行测试</var-chip> 
    <var-chip class="mr-2" :round="false" type="primary">测试结果</var-chip>-->
    <var-chip class="mr-2" :round="false"
      >题目总数：{{ ResultData.total.titleCn }}</var-chip
    >
    <var-chip class="mr-2" type="success" :round="false"
      >正确题数：{{ ResultData.total.rightCn }}</var-chip
    >
    <var-chip class="mr-2" type="danger" :round="false"
      >错误题数：{{ ResultData.total.wrongCn }}</var-chip
    >
  </div>
  <div class="overflow-auto h-200">
    <var-card
      outline
      :elevation="0"
      v-for="(item, index) in ResultData.resultlist"
      class="mt-2 font-bold p-2 text-left"
    >
      <template #title>
        <div class="bgGrey p-2">
          {{ index + 1 }}.<span v-html="item.question"></span>
        </div>
      </template>
      <template #description>
        <var-row class="p-4" :gutter="10">
          <var-col class="mb-2" :span="24">
            <var-button :class="classes(item, item.optionA)" block
              >A. {{ item.optionA }}</var-button
            >
          </var-col>
          <var-col
            class="mb-2 border-gray-500 font-bold border-1 text-xl"
            :span="24"
          >
            <var-button :class="classes(item, item.optionB)" block
              >B. {{ item.optionB }}</var-button
            >
          </var-col>
          <var-col
            class="mb-2 border-gray-500 font-bold border-1 text-xl"
            :span="24"
          >
            <var-button :class="classes(item, item.optionC)" block
              >C. {{ item.optionC }}</var-button
            >
          </var-col>
          <var-col
            class="mb-2 border-gray-500 font-bold border-1 text-xl"
            :span="24"
          >
            <var-button :class="classes(item, item.optionD)" block
              >D. {{ item.optionD }}</var-button
            >
          </var-col>
          <var-col
            class="mb-2 border-gray-500 font-bold border-1 text-xl"
            :span="24"
            v-if="item.chooseOption == ''"
          >
            <var-button class="shadow-none" type="danger" block
              >NONE</var-button
            >
          </var-col>
        </var-row>
      </template>
      <var-divider dashed />
    </var-card>
  </div>
  <var-dialog v-model:show="diashow" :cancel-button="false" confirm-button-text-color="#181717" confirm-button-text="好的" dialog-class="bg-amber-500">
    <template #title>
     <h2 class="text-slate-50 m-0">注意</h2>
    </template>
    <h2 class="text-center m-0">Tony：这道题你答错了!</h2>
    <h2 class="text-center m-0">老师正对你点名</h2>
    <h2 class="text-center m-0">请注意听讲，争取下次不要犯同样错误!</h2>
  </var-dialog>
</template>

<script setup>
import { reactive, onMounted, computed,ref  } from "vue";
import { postData } from "@/utils/api";
import { loginStore } from "@/store/user";
import { useRouter } from "vue-router";
import socket from "@/utils/socket.js";
const store = loginStore();
const cusRouter = useRouter();
const diashow = ref(false);
let user = "";
if (store.getUserInfo?.userInfo == undefined) {
  user = store.getUserInfo;
} else {
  user = JSON.parse(store.getUserInfo?.userInfo);
}
const ResultData = reactive({
  total: "",
  resultlist: "",
});

const classes = computed(() => (item, option) => {
  if (item.answer == option) {
    return [
      "success",
      "shadow-none",
      "border-gray-500 font-bold border-1 text-xl",
    ];
  }
  if (item.chooseOption == option && item.chooseOption != item.answer) {
    return [
      "danger",
      "shadow-none",
      "border-gray-500 font-bold border-1 text-xl",
    ];
  }
  return ["shadow-none border-gray-500 font-bold border-1 text-xl"];
  // if (item.chooseOption == item.optionA) {
  //   if (item.chooseOption == item.answer) {
  //     return ['success' ]
  //   }
  // } else if (item.chooseOption == item.optionB) {
  //   if (item.chooseOption == item.answer) {
  //     return 'success'
  //   }
  // } else if (item.chooseOption == item.optionC) {
  //   if (item.chooseOption == item.answer) {
  //     return 'success'
  //   }
  // } else if (item.chooseOption == item.optionD) {
  //   if (item.chooseOption == item.answer) {
  //     return 'success'
  //   }
  // }
});
const getResult = () => {
  postData("config/test/studentResult", {
    classroomId: user.classRoomId,
    studentId: user.id,
  }).then((res) => {
    //console.log(res)
    ResultData.total = res.data.total;
    ResultData.resultlist = res.data.data;
  });
};
const goBack = () => {
  cusRouter.push({ path: "/home" });
};

onMounted(() => {
  if (window.performance.navigation.type == 1) {
    console.log("页面被刷新");
    store.changInclassRoom(false);
  } else {
    console.log("首次被加载");
  }
  socket.on("connect", () => {
    console.log("socketio-connect");
    if (store.isinClassRoom == false) {
      socket.emit(
        "join",
        Object.assign(
          {},
          {
            roomId: user.classRoomId,
            userId: user.id,
            userName: user.name,
          }
        )
      );
      store.changInclassRoom(true);
    }
  });
  getResult();
});
socket.on("EndTheExam", () => {
  getResult();
});

socket.on("studentTest", (e) => {
  cusRouter.push({ path: "/home" });
});

const userList = new Map();
socket.on("welcome", ({ userName, uList }) => {
  userList.value.forEach((k, v) => {
    if (k.userName == userName) {
      userList.value.delete(v);
    }
  });
  uList.forEach((item) => {
    const [id, value] = item;
    userList.set(id, value);
  });
});
socket.on("quit", (id) => {
  userList.delete(id);
});

socket.on("logout", (e) => {
  const { userId } = { ...e };
  if (userId === user.id) {
    store.changInclassRoom(false);
  }
});


socket.on("diashowchose", (e) => {
 e.forEach(item=>{
  if (item === user.name) {
    diashow.value = true
  }
 })
});




</script>

<style scoped>
.success {
  color: #fff;
  background-color: var(--chip-success-color);
}

.danger {
  color: #fff;
  background-color: var(--chip-danger-color);
}
:deep(.var-dialog){
  background-color: #f59e0b;
  width: 280px;
}
:deep(.var-dialog__message){
  color: #181717;
}
:deep(.var-button__content){
    white-space: break-spaces;
    word-break: normal;
    line-height: initial;
}
:deep(.var-button--normal){
  min-height: auto;
  height: auto;
  padding: 5px;
}
:deep(.var-dialog__title){
  padding: 5px 5px 0px;
}
</style>
